<template>
  <div>
    <!-- <el-breadcrumb
      v-if="compoundSelection !== 0"
      separator-class="el-icon-arrow-right"
    >
      <el-breadcrumb-item :to="{ path: '/' }">化合物下载</el-breadcrumb-item>
    </el-breadcrumb> -->

    <el-card style="margin-top: 10px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <!-- <el-breadcrumb-item :to="{ path: '/' }">化合物下载</el-breadcrumb-item> -->
        <div class="manager-alla">
          <div class="project-manager"></div>
          <div class="project-itema">
            <el-breadcrumb-item :to="{ path: '/' }"
              >化合物下载</el-breadcrumb-item
            >
          </div>
        </div>
      </el-breadcrumb>
      <el-alert
        style="margin-top: -10px;margin-bottom:15px;"
        title="注意：想要下载您选择的化合物时，可以在表单中单选您想下载的化合物 也可以输入您需要下载的该化合物的化合物ID的范围 两者将会共同生成excel表单。"
        type="warning"
        show-icon

      ></el-alert>
      <div
        v-if="compoundSelection === 0"
        style="margin-bottom:10px;"
      >
        请选择您要下载的数据类型：
      </div>
      <el-radio-group
        v-model="compoundSelection"
        @change="selectionChange"
        style="margin-top: 10px;margin-bottom:20px;"
      >
        <el-radio label="1">MD</el-radio>
        <el-radio label="2">MC</el-radio>
        <el-radio label="3">BIO</el-radio>
      </el-radio-group>

      <el-row style="margin-top: 20px;">
        <el-form :inline="true">
          <!--            可以加提示框-->
          <el-row>
            <el-col>
              <div style="display:flex; align-items:center;margin-bottom:15px;">
                <div v-if="compoundSelection !== 0" style="margin-top:-22px;" >
                  请输入您要下载的化合物的范围 :
                </div>
                <el-row v-if="compoundSelection !== 0" style="margin-left:6px;">
                  <el-form-item label="">
                    <el-input
                      v-model="selectMin"
                      placeholder="请输入化合物id"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="一">
                    <el-input
                      v-model="selectMax"
                      placeholder="请输入化合物id"
                    ></el-input>
                  </el-form-item>
                </el-row>
              </div>
              <el-button
                v-if="compoundSelection !== 0"
                type="primary" plain
                @click="downloadCompound()"
                >下载选定化合物
              </el-button>
              <el-button
                v-if="compoundSelection !== 0"
                type="success" plain
                @click="downloadCompoundAndPic()"
                >下载选定化合物（包含图片）
              </el-button>

              <el-button
                v-if="compoundSelection !== 0"
                type="warning" plain
                @click="downloadAllCompound()"
                >下载所有化合物
              </el-button>
              <el-button
                v-if="compoundSelection !== 0"
                type="primary" plain
                @click="downloadAllCompoundAndPic()"
              >
                下载所有化合物(包含图片)
              </el-button>
              <el-button
                v-if="compoundSelection !== 0"
                type="danger" plain
                @click="resetPage()"
                >重置</el-button
              >
            </el-col>
          </el-row>
          <br />
          <el-col>
            <el-button
              type="primary"
              @click="downloadExcel()"
              v-if="downloadStatus === 1 || downloadStatus === 2"
              >下载Excel
            </el-button>
            <el-button
              type="primary"
              @click="downloadZip()"
              v-if="downloadStatus === 2"
              >下载图片</el-button
            >
          </el-col>
        </el-form>

        <!--          <div>请拖动滑块选择下载的化合物的范围</div>-->
        <!--          <div v-if="compoundSelection!==0" class="block" >-->
        <!--            <el-slider-->
        <!--              v-model="selectValue"-->
        <!--              range-->
        <!--              show-stops-->
        <!--              width="80px"-->
        <!--              :max="this.total">-->
        <!--            </el-slider>-->
        <!--          </div>-->
      </el-row>
      <el-row style="margin-top: 20px;">
        <!--        选择区域-->
        <!--      角色列表区域-->
        <!--        下载和条形码展示还没有-->
        <el-table
          ref="downloadTable"
          v-if="compoundSelection === '1'"
          :data="compoundList"
          border
          stripe
          style="width:100%"
          class="compoundTable"
          header-dragend
          @select="handleSelectionChange"
          @select-all="handleSelectionChange"
          :height="tableHeight"
        >
          <!-- 展开列 -->

          <el-table-column type="expand">
            <template slot-scope="props">
              <!--                        <div>{{ props.row }}</div>-->
              <el-form label-position="left" inline class="demo-table-expand">
                <el-row class="expand-msg">
                  <el-col>
                    <el-form-item label="化合物结构" class="table-item">
                      <el-image
                        class="table-image"
                        :src="
                          this.now_url.now_url+`pictures/${props.row.structureUrl}`
                        "
                      >
                        <div slot="error" class="image-slot">
                          <!--                      :show-overflow-tooltip="true" 让文字强制在一行-->
                          <span class="table-item-span"
                            >图片加载失败或不存在</span
                          >
                        </div>
                      </el-image>
                      <!--                  <span class="table-item-span" >{{ props.row.structureUrl }}</span>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col>
                    <el-form-item label="化合物结构smiles" class="table-item">
                      <span class="table-item-span">{{
                        props.row.structureSmiles
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col :span="12">
                    <el-form-item label="虚拟化合物编号" class="table-item">
                      <!--                    <span v-if="props.row.vid!==''">V</span>-->
                      <span class="table-item-span">{{ props.row.vid }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="化合物编号" class="table-item">
                      <span class="table-item-span">{{ props.row.sid }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col>
                    <el-form-item label="分子量" class="table-item">
                      <span class="table-item-span">{{ props.row.mw }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col :span="8">
                    <el-form-item label="理论值clog P" class="table-item">
                      <span class="table-item-span">{{ props.row.clogP }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="expand-msg-left">
                    <el-form-item label="理论值tPSA" class="table-item">
                      <span class="table-item-span">{{ props.row.tpsa }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="expand-msg-left">
                    <el-form-item label="理论值 HBD" class="table-item">
                      <span class="table-item-span">{{ props.row.hbd }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col :span="12">
                    <el-form-item label="设计人" class="table-item">
                      <span class="table-item-span">{{
                        props.row.designer
                      }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="研发项目" class="table-item">
                      <span class="table-item-span">{{
                        props.row.project
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col :span="12">
                    <el-form-item label="评估模型" class="table-item">
                      <el-button
                        class="add-button"
                        type="primary"
                        @click="uploadPse(props.row.moduleUrl)"
                        plain
                        >下载
                      </el-button>
                      <!--                    <span class="table-item-span">{{ props.row.moduleUrl }}</span>-->
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="是否进入合成" class="table-item">
                      <span class="table-item-span">{{
                        props.row.compound
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col :span="12">
                    <el-form-item label="信息录入日期" class="table-item">
                      <span class="table-item-span">{{
                        props.row.inputDate | timestampToTime
                      }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="信息录入人员" class="table-item">
                      <span class="table-item-span">{{
                        props.row.keyboarder
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <!-- 索引列 -->
          <!--        <el-table-column type="index" label="#"></el-table-column>-->
          <el-table-column type="selection" width="55" prop="isCheck">
            <!--            <el-checkbox prop="check" @change="checkToDownload(prop)">选</el-checkbox>-->
          </el-table-column>
          <el-table-column label="化合物编号" prop="sid" ></el-table-column>
          <el-table-column
            label="化合物结构smiles"
            prop="structureSmiles"
          ></el-table-column>
          <el-table-column
            label="信息录入日期"
            prop="inputDate"
            :formatter="formatDate"
          ></el-table-column>
        </el-table>
        <el-table
          v-if="compoundSelection === '2'"
          :data="compoundList"
          border
          stripe
          style="width:100%"
          class="compoundTable"
          height="500"
        >
          <!-- 展开列 -->
          <el-table-column type="expand">
            <template slot-scope="props">
              <!--            <div>{{ props.row }}</div>-->
              <el-form label-position="left" inline class="demo-table-expand">
                <el-row class="expand-msg">
                  <el-col>
                    <el-form-item label="化合物结构" class="table-item">
                      <el-image
                        class="table-image"
                        :src="
                          this.now_url.now_url+`pictures/${props.row.structureUrl}`
                        "
                      >
                        <div slot="error" class="image-slot">
                          <span class="table-item-span"
                            >图片加载失败或不存在</span
                          >
                        </div>
                      </el-image>
                      <!--                  <span class="table-item-span" >{{ props.row.structureUrl }}</span>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col>
                    <el-form-item label="化合物结构smiles" class="table-item">
                      <span class="table-item-span">{{
                        props.row.structureSmiles
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col>
                    <el-form-item label="化合物编号" class="table-item">
                      <span class="table-item-span">{{ props.row.sid }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col>
                    <el-form-item label="存储样品瓶1条形码" class="table-item">
                      <!--                    <span class="table-item-span">{{ props.row.barCode1 }}</span>-->
                      <barcode
                        :value="props.row.barCode1"
                        :options="barcode_option"
                        >条形码加载失败</barcode
                      >
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row class="expand-msg">
                  <el-col class="expand-msg-left">
                    <el-form-item label="存储样品瓶1质量" class="table-item">
                      <span class="table-item-span">{{
                        props.row.quality1
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col>
                    <el-form-item label="存储样品瓶2条形码" class="table-item">
                      <barcode
                        :value="props.row.barCode2"
                        :options="barcode_option"
                        >条形码加载失败</barcode
                      >
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col class="expand-msg-left">
                    <el-form-item label="存储样品瓶2质量" class="table-item">
                      <span class="table-item-span">{{
                        props.row.quality2
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col :span="12">
                    <el-form-item label="批次" class="table-item">
                      <span class="table-item-span">{{ props.row.batch }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="合成人员" class="table-item">
                      <span class="table-item-span">{{
                        props.row.creator
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row class="expand-msg">
                  <el-col :span="12">
                    <el-form-item label="实验记录本编号" class="table-item">
                      <span class="table-item-span">{{
                        props.row.recordNumber
                      }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="纯度" class="table-item">
                      <span class="table-item-span">{{
                        props.row.purity
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col :span="12">
                    <el-form-item label="形状（颜色）" class="table-item">
                      <span class="table-item-span">{{ props.row.ch }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="形式" class="table-item">
                      <span class="table-item-span">{{
                        props.row.freeBaseOrSalt
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col>
                    <el-form-item
                      label="核磁谱图、质谱等表征数据"
                      class="table-item"
                    >
                      <el-button
                        class="add-button"
                        type="primary"
                        @click="uploadRar(props.row.characterizationUrl)"
                        plain
                        >下载
                      </el-button>
                      <!--                    <span class="table-item-span">{{ props.row.characterizationUrl }}</span>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col :span="8">
                    <el-form-item label="分子量" class="table-item">
                      <span class="table-item-span">{{ props.row.mw }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="expand-msg-left">
                    <el-form-item label="研发项目编号" class="table-item">
                      <span class="table-item-span">{{
                        props.row.projectId
                      }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="expand-msg-left">
                    <el-form-item label="存储位置" class="table-item">
                      <span class="table-item-span">{{
                        props.row.position
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col :span="12">
                    <el-form-item label="信息录入日期" class="table-item">
                      <span class="table-item-span">{{
                        props.row.inputDate | timestampToTime
                      }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="信息录入人员" class="table-item">
                      <span class="table-item-span">{{
                        props.row.keyboarder
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <!-- 索引列 -->
          <!--        <el-table-column type="index" label="#"></el-table-column>-->
          <el-table-column
            label="下载"
            v-model="this.compoundList"
          ></el-table-column>
          <el-table-column label="化合物编号" prop="sid"></el-table-column>
          <el-table-column
            label="化合物结构smiles"
            prop="structureSmiles"
          ></el-table-column>
          <el-table-column
            label="信息录入日期"
            prop="inputDate"
            :formatter="formatDate"
          ></el-table-column>
        </el-table>
        <el-table
          v-if="compoundSelection === '3'"
          :data="compoundList"
          border
          stripe
          style="width:100%"
          class="compoundTable"
          height="500"
        >
          <!-- 展开列 -->
          <el-table-column type="expand">
            <template slot-scope="props">
              <!--            <div>{{ props.row }}</div>-->
              <el-form label-position="left" inline class="demo-table-expand">
                <el-row class="expand-msg">
                  <el-col>
                    <el-form-item label="化合物编号" class="table-item">
                      <span class="table-item-span">{{ props.row.sid }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col class="expand-msg-left">
                    <el-form-item label="存储样品瓶1条形码" class="table-item">
                      <!--                    <span class="table-item-span">{{ props.row.barCode1 }}</span>-->
                      <barcode
                        :value="props.row.barCode1"
                        :options="barcode_option"
                        >条形码加载失败</barcode
                      >
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row class="expand-msg">
                  <el-col :span="12">
                    <el-form-item label="数据提供方" class="table-item">
                      <span class="table-item-span">{{
                        props.row.productDate
                      }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="数据产生日期" class="table-item">
                      <span class="table-item-span">{{
                        props.row.provider | timestampToTime
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col :span="12">
                    <el-form-item label="数据录入人员" class="table-item">
                      <span class="table-item-span">{{
                        props.row.keyboarder
                      }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="数据录入日期" class="table-item">
                      <span class="table-item-span">{{
                        props.row.inputDate | timestampToTime
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col :span="12">
                    <el-form-item label="测试项目1名称" class="table-item">
                      <span class="table-item-span">{{
                        props.row.projectName1
                      }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="测试项目1数值" class="table-item">
                      <span class="table-item-span">{{
                        props.row.projectNumber1
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col>
                    <el-form-item label="测试项目1图片" class="table-item">
                      <el-image
                        class="table-image"
                        :src="
                          this.now_url.now_url+`pictures/${props.row.projectPic1}`
                        "
                      >
                        <div slot="error" class="image-slot">
                          <span class="table-item-span"
                            >图片加载失败或不存在</span
                          >
                        </div>
                      </el-image>
                      <!--                    <span class="table-item-span">{{ props.row.projectPic1 }}</span>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col :span="12">
                    <el-form-item label="测试项目2名称" class="table-item">
                      <span class="table-item-span">{{
                        props.row.projectName2
                      }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="测试项目2数值" class="table-item">
                      <span class="table-item-span">{{
                        props.row.projectNumber2
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <el-col>
                    <el-form-item label="测试项目2图片" class="table-item">
                      <el-image
                        class="table-image"
                        :src="
                          this.now_url.now_url+`pictures/${props.row.projectPic2}`
                        "
                      >
                        <div slot="error" class="image-slot">
                          <span class="table-item-span"
                            >图片加载失败或不存在</span
                          >
                        </div>
                      </el-image>
                      <!--                    <span class="table-item-span">{{ props.row.projectPic2 }}</span>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="expand-msg">
                  <!--                不知道是什么类型 先当做rar来放了-->
                  <el-col :span="12">
                    <el-form-item
                      label="测试数据SOP（如有）"
                      class="table-item"
                    >
                      <el-button
                        class="add-button"
                        type="primary"
                        @click="uploadFile(props.row.sopUrl)"
                        plain
                        >下载
                      </el-button>
                      <!--                    <span class="table-item-span">{{ props.row.sopUrl }}</span>-->
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="expand-msg-left">
                    <el-form-item label="测试原始数据" class="table-item">
                      <el-button
                        class="add-button"
                        type="primary"
                        @click="uploadFile(props.row.originalDataUrl)"
                        plain
                      >
                        下载
                      </el-button>
                      <!--                    <span class="table-item-span">{{ props.row.originalDataUrl }}</span>-->
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <!-- 索引列 -->
          <!--        <el-table-column type="index" label="#"></el-table-column>-->
          <el-table-column
            label="下载"
            v-model="this.compoundList"
          ></el-table-column>
          <el-table-column label="化合物编号" prop="sid"></el-table-column>
          <el-table-column
            label="数据产生日期"
            prop="productDate"
            :formatter="formatDate"
          ></el-table-column>
          <el-table-column
            label="数据录入日期"
            prop="inputDate"
            :formatter="formatDate"
          ></el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import VueBarcode from "@xkeshi/vue-barcode";

export default {
  name: "download",
  data() {
    return {
      //整一个数组 包含所有SId 如果里面有该sid 单选框就处于选中状态
      compoundList: [],
      compoundSelection: 0,
      //下载状态 为0的时候都不显示 为1的时候显示excel下载 为2的时候显示excel和zip下载
      downloadStatus: 0,
      queryInfo: {
        query: "",
        // 当前的页数
        page: 1,
        // 当前每页显示多少条数据
        size: 99999,
        type: 0
      },
      total: 0,
      // 监听 分页的size 改变的事件
      query: "",
      selectValue: [0, 0],
      barcode_option: {
        // displayValue: false,
        fontSize: "15px"
        // format:"EAN-8"
        // width:'1000px',
        // height:'100px',
      },
      selectMax: "",
      selectMin: "",
      excelUrl: "",
      rarUrl: "",
      // 下载已选择的部分
      multipleSelection: [],
      multipleSelectionSid: [],
      downloadSidList: [],
      exchangeFlag: 0,
      tableHeight: window.innerHeight - 200
    };
  },
  methods: {
    async selectionChange(value) {
      //  console.log(value);
      if (value === "1") {
        this.queryInfo.type = 1;
      }
      if (value === "2") {
        this.queryInfo.type = 2;
      }
      if (value === "3") {
        this.queryInfo.type = 3;
      }

      if (this.query === "") {
        this.queryInfo.query = -1;
      } else {
        this.queryInfo.query = this.query;
      }
      const { data: res } = await this.$axios.get("get", {
        params: this.queryInfo
      });
      if (res.code !== 200) {
        return this.$message.error("获取角色列表失败！");
      }
      // // //切页后保存选择框
      // this.toggleSelection(this.multipleSelection)

      this.compoundList = res.data;
      this.total = res.total;
      //  console.log(this.compoundList);
    },
    //时间戳转化为时间
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data);
      return dt.getFullYear() + "-" + (dt.getMonth() + 1) + "-" + dt.getDate();
    },

    async downloadCompound() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //得到最低值min 最高值max
      //  console.log("最小值和最大值为");
      //  console.log(this.selectMin);
      //  console.log(this.selectMax);
      //  console.log("选择数组为");
      //  console.log(this.multipleSelectionSid);
      //返回msg和code
      const { data: res } = await this.$axios.post("generatePageType", {
        index: this.selectMin,
        lastIndex: this.selectMax,
        longs: this.multipleSelectionSid,
        type: this.queryInfo.type
      });
      //  console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      //只返回excel的Url
      this.excelUrl = res.msg;
      //  console.log(this.excelUrl);
      this.downloadStatus = 1;
    },
    async downloadCompoundAndPic() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //得到最低值min 最高值max
      //  console.log("最小值和最大值为");
      //  console.log(this.selectMin);
      //  console.log(this.selectMax);
      //  console.log("选择数组为");
      //  console.log(this.multipleSelectionSid);
      //返回msg和code
      const { data: res } = await this.$axios.post("generatePageTypeFile", {
        index: this.selectMin,
        lastIndex: this.selectMax,
        longs: this.multipleSelectionSid,
        type: this.queryInfo.type
      });
      //  console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      //只返回excel的Url
      this.excelUrl = res.data[0];
      this.rarUrl = res.data[1];
      this.downloadStatus = 2;
    },
    async downloadAllCompound() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //  console.log(this.queryInfo.type);
      const { data: res } = await this.$axios.get("/generateAllType", {
        params: {
          type: this.queryInfo.type
        }
      });
      //  console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      //也是返回一个
      this.excelUrl = res.msg;
      // this.rarUrl=res.pic
      //  console.log(this.excelUrl);
      this.downloadStatus = 1;
    },
    // 缺少接口中
    async downloadAllCompoundAndPic() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //返回4个参数 msg为获取成功 code excel pic
      //  console.log("type为");
      //  console.log(this.queryInfo.type);
      const { data: res } = await this.$axios.get("generateAllTypeFile", {
        params: {
          type: this.queryInfo.type
        }
      });
      //  console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      this.excelUrl = res.data[0];
      this.rarUrl = res.data[1];
      //  console.log(this.excelUrl)
      //  console.log(this.rarUrl)
      this.downloadStatus = 2;
    },
    xxxCompound() {},
    uploadRar(fileName) {
      //  console.log(fileName);
      if (!fileName) {
        this.$message.error("文件不存在!");
        return;
      }
      // const urlFirst = fileName.substring(0, name.lastIndexOf("."))
      //http://121.36.58.180:8081/file/
      const url = this.now_url.now_url+"server_static/" + fileName;
      //下载

      window.open(url);
    },
    uploadPse(fileName) {
      //  console.log(fileName);
      if (!fileName) {
        this.$message.error("文件不存在!");
        return;
      }
      // const urlFirst = fileName.substring(0, name.lastIndexOf("."))
      const url = this.now_url.now_url+"server_static/" + fileName;
      //下载

      window.open(url);
    },
    uploadFile(fileName) {
      //  console.log(fileName);
      if (!fileName) {
        this.$message.error("文件不存在!");
        return;
      }
      //暂时在RAR里用
      const url = this.now_url.now_url+"server_static/" + fileName;
      //下载

      window.open(url);
    },
    resetPage() {
      // 重置页面 信息都变为0
      this.compoundList = [];
      this.compoundSelection = 0;
      this.queryInfo.query = "";
      // 当前的页数
      this.queryInfo.page = 1;
      // 当前每页显示多少条数据
      this.queryInfo.size = 5;
      this.queryInfo.type = 0;
      this.total = 0;
      // 监听 分页的size 改变的事件
      this.query = "";
      this.selectValue = [0, 0];
      this.selectMax = "";
      this.selectMin = "";
      this.downloadStatus = 0;
    },
    downloadExcel() {
      if (!this.excelUrl) {
        this.$message.error("文件不存在!");
        return;
      }
      // const urlFirst = fileName.substring(0, name.lastIndexOf("."))
      //http://121.36.58.180:8081/file/
      //  console.log(this.excelUrl);
      const url = this.now_url.now_url+"return_file/" + this.excelUrl;
      //下载

      window.open(url);
    },
    downloadZip() {
      if (!this.rarUrl) {
        this.$message.error("文件不存在!");
        return;
      }
      //  console.log(this.rarUrl);
      // const urlFirst = fileName.substring(0, name.lastIndexOf("."))
      //http://121.36.58.180:8081/file/
      const url = this.now_url.now_url+"return_file/" + this.rarUrl;
      //下载

      window.open(url);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelectionSid = [];
      if (this.multipleSelection) {
        this.multipleSelection.forEach(row => {
          this.multipleSelectionSid.push(row.sid);
        });
      }
    }

    // 切换这些行的保存状态

    // toggleSelection(val) {
    //   //  console.log('切换toggleSelection执行-------------')
    //   //  console.log('进入前------------')
    //   //  console.log(this.multipleSelection)
    //   if(this.exchangeFlag===1){
    //     //  console.log('成功恢复选项-------------')
    //     this.exchangeFlag=0
    //     this.pageChange()
    //   }
    //   //  console.log('框里结果')
    //   //  console.log(this.multipleSelection)
    //   //  console.log(this.$refs.downloadTable)
    //
    //   // else {
    //   //   this.$refs.downloadTable.clearSelection();
    //   // }
    // },
    // pageChange(){
    //   //  console.log(this.multipleSelection)
    //   if (this.multipleSelection) {
    //     this.multipleSelection.forEach(row => {
    //       //  console.log('XXXXXXXXXXXXXX')
    //
    //       this.$refs.downloadTable.toggleRowSelection(row,true);
    //     });
    //   }else {
    //     this.$refs.downloadTable.clearSelection();
    //   }
    //
    // },
    //     // 解决Table 切换页面 原先选择状态消失
    //     getRowKeys(row) {
    //       // id 是后台传递的每行信息唯一标识
    //       return row.id
    //     },
    // // 回显数据
    //     echoData() {
    //       if (this.product_package.length > 0) {
    //         let hasSelectList = []
    //         this.packageItems.forEach((i, index) => {
    //           this.product_package.forEach((j) => {
    //             if (i.id == j.id) {
    //               hasSelectList.push(index)
    //               return (i.goodsNumber = j.use_num)
    //             }
    //           })
    //         })
    //         this.$emit('selectChange', this.hasSelectList)
    //         hasSelectList.forEach((i) => {
    //           this.$nextTick(() => {
    //             //关键代码 按照你的数据结构 循环Table 让需要勾选项作如下操作
    //             this.$refs.multipleTableClinicRoom.toggleRowSelection(this.packageItems[i], true)
    //           })
    //         })
    //       }
    //     },
  },
  components: {
    barcode: VueBarcode
  }
};
</script>

<style>
.compoundTable {
  margin-top: 20px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  /*width: 90px;*/
  color: #99a9bf;
}

.demo-table-expand {
  margin-right: 0;
  margin-bottom: 0;
}

.expand-msg {
  border-radius: 1px !important;
  border: 1px solid rgba(239, 239, 239, 0.36);
  /*height: 50px;*/
  line-height: 50px;
  /*border: 1px solid #000 !important;*/
  /*border-right: none;*/
}

.expand-msg-left {
  border-left: 2px solid rgba(239, 239, 239, 0.36);
  /*border-left: 2px solid #d7dae2;*/
}

.table-item {
  margin-bottom: 0px !important;
  line-height: 50px;
  padding-left: 10px;
}

.table-item-span {
  line-height: 50px;
}

.add-button {
  margin-top: 5px;
}

.table-image {
  width: auto;
  height: auto;
  /*max-width: 50%;*/
  /*max-height: 50%;*/
  display: block;
}
.manager-alla {
  margin-top: 6px;
  display: flex;
  height: 30px;
  width: 130px;
  justify-content: center;
  margin-bottom: 30px;
}
.project-manager {
  width: 4px;
  height: 30px;
  background: #4087fc;
}
.project-itema {
  width: 100px;
  height: 18px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 600px;
  color: #333333;
  margin-left: 10px;
  line-height: 30px;
}
</style>
<!--  <script>-->
<!--    import Template from "../../components/template";-->
<!--    export default {-->
<!--      components: {Template}-->
<!--    }-->
<!--  </script>-->
